<template>
  <view class="add-check-in-rules">
    <view class="check-in-rules-con">
      <view class="basic-settings">
        <view class="check-in-rules-title">
          <text>基础设置</text>
        </view>
        <view class="check-in-rules-item">
          <nut-form>
            <nut-cell
              title="规则设置"
              v-if="false"
            >
              <template #link>
                <nut-radio-group
                  v-model="val"
                  direction="horizontal"
                >
                  <nut-radio label="1">上下班</nut-radio>
                  <nut-radio label="2">外出</nut-radio>
                </nut-radio-group>
              </template>
            </nut-cell>
            <view class="attendance-personnel-user">
              <view class="personnel-user-left">
                <view class="title">
                  <text>考勤人员</text>
                  <text>（部门新员工将自动加入）</text>
                </view>
                <view class="user-number">
                  <text>已选择：{{ attendanceUsers?.length ?? 0 }}人</text>
                </view>
                <view class="add-user-box">
                  <view
                    class="add-user"
                    @click="handleGoDept"
                  >
                    <i class="iconfont icon-jiajianzujianjiahao"></i>
                  </view>
                  <view class="selected-user">
                    <view
                      class="selected-user-item"
                      v-for="(itm, idx) in attendanceUsers"
                      :key="idx"
                    >
                      <img
                        v-if="idx < 3"
                        :src="itm.avatarUrls"
                        alt=""
                      />
                    </view>
                    <text v-if="attendanceUsers?.length > 3">...{{ attendanceUsers?.length - 3 }}人</text>
                  </view>
                </view>
              </view>
              <view class="personnel-user-right">
                <text>{{ attendanceDeptIds.length }}个部门</text>
                <i class="iconfont icon-youjiantou1"></i>
              </view>
            </view>
            <nut-cell
              is-link
              title="考勤组名称"
              @click="handleSelect('name')"
            >
              <template #desc>
                <view
                  class="desc"
                  :class="{ active: formData.ruleName }"
                >
                  <text v-if="formData.ruleName">{{ formData.ruleName }}</text>
                  <text v-else>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              is-link
              title="考勤类型"
              @click="handleSelect('type')"
            >
              <template #desc>
                <view
                  class="desc"
                  :class="{ active: formData?.ruleTypeText }"
                >
                  <text v-if="formData?.ruleTypeText">{{ formData?.ruleTypeText }}</text>
                  <text v-else>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="班次设置"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="打卡方式"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="打卡位置"
              @click="handlePosition('position')"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
          </nut-form>
        </view>
      </view>
      <view class="more-settings">
        <view class="check-in-rules-title">
          <text>更多设置</text>
        </view>
        <view class="check-in-rules-item">
          <nut-form>
            <nut-cell v-if="false">
              <template #title>
                <view class="title">
                  <text>休息日与节假日加班</text>
                  <i
                    class="iconfont icon-kongxinwenhao"
                    style="font-size: 28rpx; color: #1e74fd; padding-left: 10rpx"
                  ></i>
                </view>
              </template>
              <template #link>
                <nut-switch v-model="checked" />
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="特殊日期"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              is-link
              title="打卡WIFI"
              @click="handlePosition('wifi')"
            >
              <template #desc>
                <view class="desc">
                  <template v-if="selectWifiList.length > 0">
                    <text
                      v-for="(itm, idx) in selectWifiList"
                      :key="idx"
                      >{{ itm.name }}{{ idx < selectWifiList.length - 1 ? "," : "" }}
                    </text>
                  </template>
                  <text v-else>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="打卡设备"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="加班规则"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="加班时长设置"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              v-if="false"
              is-link
              title="补卡和请假设置"
            >
              <template #desc>
                <view class="desc">
                  <text v-if="false">666</text>
                  <text>未设置</text>
                </view>
              </template>
            </nut-cell>
            <nut-cell
              is-link
              title="更多设置"
              @click="handlePosition('more')"
            >
              <template #desc>
                <view class="desc">
                  <text
                    >{{
                      whitelistUserData?.whitelistUsers?.length > 0 ||
                      whitelistUserData?.outScopeFlag != null ||
                      whitelistUserData?.outSyncFlag != null
                        ? "已设置"
                        : "未设置"
                    }}
                  </text>
                </view>
              </template>
            </nut-cell>
          </nut-form>
        </view>
      </view>
      <view class="logo-bottom">
        <img
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
          alt=""
        />
      </view>
    </view>
    <view
      class="add-schedule-btn"
      @click="submit"
    >
      <nut-button color="#1E74FD"> 保存 </nut-button>
    </view>
    <nut-popup
      v-model:visible="show"
      position="bottom"
      round
      :style="{ height: '50%' }"
      :closeable="popupType == 'name' ? true : false"
    >
      <view class="popup-content">
        <view
          class="popup-content-item check-in-name"
          v-if="popupType == 'name'"
        >
          <view class="popup-content-item-title">
            {{ formData?.ruleName }}
          </view>
          <nut-textarea
            v-model="ruleNames"
            placeholder="请输入"
          />
          <view class="popup-content-item-btn">
            <nut-button
              color="#1E74FD"
              @click="confirmText"
            >
              确定
            </nut-button>
          </view>
        </view>
        <view
          class="popup-content-item"
          v-if="popupType == 'type'"
        >
          <nut-picker
            v-model="formData.ruleType"
            :columns="columns"
            :title="'选择' + formTitleText"
            @confirm="confirmRuleType"
            @cancel="show = false"
          />
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { navigateTo, useDidShow } from "@tarojs/taro";
import { userInfoStore } from "@/stores/userInfoStore";
import { addAttendanceRules, getWifiLists } from "@/api/index";
const store = userInfoStore();
const val = ref("1");
const ruleNames = ref();
const show = ref(false);
const text = ref("未设置");
const attendanceDeptIds = ref([]);
const attendanceUserIds = ref([]);
const selectUsers = ref([]);
const attendanceUsers = ref([]);
const selectUserNames = ref([]);
const whitelistUserData = ref([]);
const columns = ref([
  { text: "排班打卡", value: "1" },
  { text: "自由排班", value: "2" },
]);
const demoValue = ref();
const formTitleText = ref();
const popupType = ref();
const formData = ref({
  ruleName: "", //考勤组名称
  ruleType: "", //考勤组类型
  ruleTypeText: "", //考勤组类型文字
  wifis: [], //wifi
  addr: "",
  info: "",
});
const selectWifiList = ref([]);
onMounted(() => {
  handleGetWifiList();
  // 初始化参数
  attendanceUsers.value = [];
  formData.value = {
    ruleName: "", //考勤组名称
    ruleType: "", //考勤组类型
    ruleTypeText: "", //考勤组类型文字
    wifis: [], //wifi
    addr: "",
    info: "",
  };
});
useDidShow(() => {
  attendanceDeptIds.value = [];
  attendanceUserIds.value = [];
  selectUserNames.value = [];
  let storeSelectDeptIds = JSON.parse(JSON.stringify(store.attendanceUserIds));
  selectUsers.value = storeSelectDeptIds;
  attendanceUsers.value = storeSelectDeptIds;
  storeSelectDeptIds.forEach((item: any) => {
    attendanceDeptIds.value.push(item.deptId);
    attendanceUserIds.value.push(item.userId);
    selectUserNames.value.push(item.deptName);
  });
  attendanceDeptIds.value = [...new Set(attendanceDeptIds.value)];
  whitelistUserData.value = store.whitelistUserData;
  console.log(store.attendanceUserIds, "store.selectUserIds2");
});
const handleGetWifiList = () => {
  let params = {
    page: 1,
    pageSize: 100,
  };
  getWifiLists(params).then(res => {
    selectWifiList.value = res.rows;
  });
};
// 确认名称
const confirmText = () => {
  show.value = false;
  formData.value.ruleName = ruleNames.value;
};
// 提交
const submit = () => {
  let params = {
    userIds: selectUsers.value,
    ruleName: formData.value.ruleName,
    ruleType: formData.value.ruleType,
  };
  addAttendanceRules(params).then(res => {
    console.log(res);
  });
};
// 弹窗选择
const handleSelect = (type: string) => {
  show.value = true;
  popupType.value = type;
  console.log(type);
  if (type == "name") {
    formTitleText.value = "考勤组名称";
  } else if (type == "type") {
    formTitleText.value = "选择打卡类型";
  } else if (type == "time") {
    formTitleText.value = "选择打卡时间";
  } else if (type == "address") {
    formTitleText.value = "选择打卡地点";
  } else if (type == "device") {
    formTitleText.value = "选择打卡设备";
  } else if (type == "overtime") {
    formTitleText.value = "选择加班规则";
  } else if (type == "overtimeTime") {
    formTitleText.value = "选择加班时长设置";
  } else if (type == "leave") {
  }
};
// 打卡位置
const handlePosition = type => {
  if (type == "wifi") {
    navigateTo({
      url: "/packageC/pages/attendanceManage/devicesWiFi/index",
    });
  } else if (type == "position") {
    navigateTo({
      url: "/packageC/pages/attendanceManage/selectPosition/index",
    });
  } else if (type == "more") {
    navigateTo({
      url: "/packageC/pages/attendanceManage/moreSettings/index",
    });
  }
};
const handleGoDept = () => {
  navigateTo({
    url:
      "/components/deptStaffSelect/index?userIds=" +
      attendanceUserIds.value +
      "&ids=" +
      attendanceDeptIds.value +
      "&type=attendance",
  });
};
const confirmRuleType = ({ selectedValue, selectedOptions }) => {
  console.log(selectedValue[0], selectedOptions[0]);
  show.value = false;
  formData.value.ruleType = selectedValue[0];
  formData.value.ruleTypeText = selectedOptions[0].text;
};
</script>

<style lang="less">
@import url("./index.less");
@import "@/assets/css/index.less";
</style>
